<template>
	<view>
		<!-- 头部 header -->
		<view class="header">
			<image src="http://fresh.huruqing.cn/img/bg2.78d35cdc.png" mode=""></image>
			<text class="text" v-if="phone">{{phone}}</text>	
			<navigator class="text" v-else url="/pages/login/login">立即登录</navigator>
		</view>

		<!-- 列表 list -->
		<view class="list">
			<view class="item">
				<text>我的订单</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="item">
				<text>收藏</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="item">
				<text>足迹</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<navigator url="/pages/set/set" class="item">
				<text>设置</text>
				<u-icon name="arrow-right"></u-icon>
			</navigator>
		</view>

		<!-- 底部 footer -->
		<view class="footer">

		</view>
	</view>
</template>


<script>
		export default {
			data() {
				return {
					phone: ''
				}
			}, 
			onShow() {
				this.phone = uni.getStorageSync('phone');
			}
		}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	/* 头部 */
	.header {
		display: flex;
		position: relative;
	}

	.header image {
		width: 100%;
	}

	.header .text {
		position: absolute;
		top: 44rpx;
		left: 54rpx;
		color: #fff;
	}

	/* 列表 */
	.list {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.list .item {
		height: 88rpx;
		border-bottom: 1px solid #d7ddea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	/* 最后一个元素不要边框 */
	.list .item:last-child {
		border-bottom: none;
	}
</style>